<template>
  <div class="formReading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>表单预览(单击对应项编辑)</span>
      </div>
      <div class="form-area">
        <el-form label-position="right" label-width="160px">
          <div v-for="(row, i) in item.attrs" :key="i" @click="editFormItem(row,$event)">
            <el-form-item class="form-e-item">
              <el-tooltip class="btn" placement="top" content="添加到常用项">
                <el-button shape="circle" @click="add_def(row)" :disabled="row.disabled" icon="el-icon-plus" size="small"></el-button>
              </el-tooltip>
              <span slot="label" class="form-i-title">{{row.show_name || '未填写标题'}}</span>
              <el-row type="flex" :gutter="16">
                <el-col :span="16">
                  <el-cascader :data="row.options|set_options" v-if="row.type == 9" size="small"></el-cascader>
                  <Location v-if="row.type == 8" />
                  <el-date-picker
                    disabled
                    v-if="row.type == 7"
                    style="width:100%"
                    type="date"
                    size="small"
                    :placeholder="row.placeholder || '请填写' + row.show_name"
                  ></el-date-picker>
                  <el-upload action="#" v-if="row.type == 5">
                    <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
                  </el-upload>
                  <el-input
                    disabled
                    v-if="row.type == 1"
                    size="small"
                    :placeholder="row.placeholder || '请填写' + row.show_name"
                  />
                  <el-input disabled v-if="row.type == 2" type="textarea" :rows="4" placeholder="..." />
                  <el-radio-group v-if="row.type == 3" size="small">
                    <el-radio
                      disabled
                      v-for="(option, num) in row.options"
                      :key="num"
                      :label="option.key"
                    >
                      <span>{{option.value}}</span>
                    </el-radio>
                  </el-radio-group>
                  <el-checkbox-group v-if="row.type == 4" size="small">
                    <el-checkbox
                      disabled
                      v-for="(option, num) in row.options"
                      :key="num"
                      :label="option.value"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-col>
                <el-col :span="8">
                  <div class="btn-area">
                    <el-button
                      @click.stop="formItemChange(item.attrs, i, i-1)"
                      icon="el-icon-top"
                      circle
                      size="small"
                    ></el-button>
                    <el-button
                      @click.stop="formItemChange(item.attrs, i, i+1)"
                      icon="el-icon-bottom"
                      circle
                      size="small"
                    ></el-button>
                    <el-button
                      @click.stop="formItemDelete(item.attrs, i, true)"
                      icon="el-icon-delete-solid"
                      :disabled="row.disabled"
                      circle
                      size="small"
                    ></el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Location from "@/components/Location";

function set_label(options) {
  options.forEach(row => {
    row.label = row.value;
    if (row.children && row.children.length > 0) {
      set_label(row.children);
    }
  });
}

export default {
  components: { Location },
  props: {
    item: Object
  },
  data() {
    return {};
  },
  watch: {},
  filters: {
    set_options: options => {
      if (!options) options = [];
      options = [...options];
      set_label(options);

      return options;
      // this.$nextTick(() => {});
    }
  },
  methods: {
    // 添加到常用项
    add_def(row) {
      this.$emit("addDefaultAttrs", row);
    },
    // 编辑项
    editFormItem(row, e) {
      // console.log(e);

      this.item.formConfig = row;
    },
    // 移动项
    formItemChange(arr, index1, index2) {
      if (index1 == 0 && index1 > index2) return;
      if (index1 >= arr.length - 1 && index1 < index2) return;
      // if (arr[index2].disabled) return;
      arr.splice(index2, 1, ...arr.splice(index1, 1, arr[index2]));
    },
    // 删除项
    formItemDelete(arr, index, clear) {
      arr.splice(index, 1);
      if (clear) this.item.formConfig = {};
    }
  }
};
</script>


<style lang="less" scoped>
.form-e-item {
  position: relative;
  margin: 8px 0;
  padding: 8px 0;
  transform: translateX(0px);
  width: 100%;
  .btn {
    position: absolute;
    left: -150px;
    display: none;
  }
}
.form-e-item:hover {
  z-index: 1000;
  background: rgb(243, 236, 227);
  .btn {
    display: inline;
  }
}
.btn-area {
  display: flex;
  justify-content: space-around;
}
</style>